<template>
  <el-menu
    router
    default-active="getPath"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-submenu
      v-for="(item) in menuList"
      :key="item.id"
      :index="item.path"
    >
      <template slot="title">
        <i :class="['iconfont',iconObj[item.path]]"></i>
        <span>{{ item.authName }}</span>
      </template>
      <el-menu-item
        v-for="menu in item.children"
        :key="menu.id"
        :index="'/' + item.path + '/' + menu.path"
        >{{ menu.authName }}</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>

<script>
import { api_menu } from "../../api/menu.js";
export default {
  data() {
    return {
      menuList: [],
      iconObj:{
        users:"icon-users",
        rights:"icon-3702mima",
        goods:"icon-shangpin",
        orders:"icon-danju",
        reports:"icon-baobiao"
      }
    };
  },
  mounted() {
    this.querymenu();
 
  },
  computed:{
    getPath(){
      return this.$route.path;
    }
  },
  methods: {
    async querymenu() {
      let rst = await api_menu();
      let { meta, data } = rst;
      this.menuList = data;
      console.log(rst);
    },
  },
};
</script>

<style lang="less" scoped>
</style>